<!--销售单据-->
<template>
  <div>
    <el-container>
      <el-header>
        <el-button class="float-left btn" type="primary" round>{{lang._632}}</el-button>
        <el-select v-model="value" placeholder="请选择" class="float-right btn" style="border:1px solid #409EFF;border-radius:14px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-header>
      <!-- 顶部栏 -->
      <el-main>
        <el-table border class="text-center tables" border :data="tableData" stripe header-cell-style="color:#409eff">
          <el-table-column prop="uid" :label="lang._045" width="80">
          </el-table-column>
          <el-table-column prop="" :label="lang._028" width="80">
            <template slot-scope="scope">
              <el-button type="text" size="small">{{lang._078}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="title" :label="lang._626" width="602">
          </el-table-column>
          <el-table-column prop="content" :label="lang._627" width="642">
          </el-table-column>
          <el-table-column prop="orderTime" :label="lang._628" width="151">
          </el-table-column>
          <el-table-column prop="status" :label="lang._629">
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 中间主要内容 -->
    </el-container>
  </div>
</template>
<style>
  .el-date-editor .el-range-input {
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }

  .el-date-editor .el-range-separator {
    float: left;
    color: #409eff;
  }

  .el-date-editor .el-range__icon {
    display: none;
  }

  .ordersn-input {
    height: 28px;
    border: 1px solid #409eff;
    border-right: none;
  }

  .el-input__inner {
    border: none;
    border-radius: 0;
    height: 28px;
    line-height: 28px;
  }

  .select-input {
    height: 28px;
    line-height: 28px;
    border: 1px solid #409eff;
    border-right: none;
    margin-top: 15px;
    overflow: hidden;
  }

  .el-table th {
    text-align: center !important;
  }

  .el-table th,
  .el-table tr {
    background-color: unset;
  }

  .el-table tr {
    background: #edf5ff;
  }

  .el-table__row {
    background: unset !important;
  }

  .el-table .cell,
  .el-table th div {
    padding-left: 0px;
    padding-right: 0px;
  }

</style>

<style scoped>
  .el-input__inner {
    border: 1px solid red;
  }

  .el-header,
  .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    height: 60px;
    /* line-height: 60px; */
  }


  .el-main {
    color: #333;
    text-align: center;
    /* line-height: 160px; */
    height: calc(100vh - 120px - 80px);
    background-color: #f3f4f5;
  }

  body>.el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }


  .el-input {
    margin: 0;
    padding: 0
  }

</style>
<style lang="less" scoped>
  .el-header {
    .btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      margin-right: 20px;
    }
    .search-btn {
      height: 30px;
      line-height: 30px;
      padding: 0 20px;
      margin-top: 15px;
      border-radius: 0 14px 14px 0;
      margin-right: 20px;
      margin-left: 0;
    }
    .dataTime {
      border: 1px solid #409eff;
      color: #409eff;
      border-radius: 0 0 0 0;
      height: 30px;
      padding: 0;
      margin: 0;
      margin-top: 15px;
      overflow: hidden;
    }
    .ordersn-input {
      width: 150px;
      padding: 0;

      margin-top: 15px;
      input {
        border: unset;
      }
    }
  }

  .el-footer {
    p {
      margin: 0;
      padding: 0;
      line-height: 60px;
    }
  }

</style>



<script>
  export default {
    props: ['lang'],
    data() {
      return {
        tableData: [{
            uid: '1',
            title: '这是门店通知的标题',
            content: '这是门店通知的内容',
            orderTime: '2017-12-31 12:00:00',
            status: '开启'
        },{
            uid: '1',
            title: '这是门店通知的标题',
            content: '这是门店通知的内容',
            orderTime: '2017-12-31 12:00:00',
            status: '开启'
        },{
            uid: '1',
            title: '这是门店通知的标题',
            content: '这是门店通知的内容',
            orderTime: '2017-12-31 12:00:00',
            status: '开启'
        },{
            uid: '1',
            title: '这是门店通知的标题',
            content: '这是门店通知的内容',
            orderTime: '2017-12-31 12:00:00',
            status: '开启'
        },]

        //表格数据
      }
    }
  }

</script>
